本篇範例會沿用下方程式碼:
var http = require("http");
http
.createServer(function (request, response) {
response.writeHead(200, {
"Content-type": "text/plain",
});
response.write("<h1>hello node!</h1>");
response.end();
})
request 是使用者透過瀏覽器所發出的請求,當請求發出後會透過內建模組 HTTP 裡面的 createServer 方法的 request 去接這個請求。把 request 用 console 印出來看看,並執行 app.js 檔案。
並且輸入下方網址:
127.0.0.1:3030
會發現當我輸入網址後,終端機有跑一下,切過來看會看到滿滿的資訊:
資訊太長,可以在自己的終端機看
這些都是使用者可以發出的請求給瀏覽器,並且在傳給 request,再看要 response 什麼東西給使用者。
假設說想看一下目前網址,我把 request.url
印出來:
var http = require("http");
http
.createServer(function (request, response) {
console.log(request.url);
response.writeHead(200, {
"Content-type": "text/html",
});
response.write("<h1>hello node!</h1>");
response.end(); //記得要加上這段程式才會停止執行
})
.listen(3030);
一樣執行 node app.js
,然後輸入網址,會發現終端機回傳以下結果:
可以看到首頁的預設是 /
,同時也印出 favicon.ico,也就是網頁標籤左邊的那個小圖示。
如果在 3030 port 後面加上網址 /hellonode
,也會印出剛剛給的網址喔!
前端工程師很常透過 network 去看串接 API 的結果與相關資訊,所以在網頁上滑鼠點右鍵,在找到檢查,會出現 Chrome 開發人員工具,選到 network,標籤選擇 all,然後重新整理網頁或是在剛剛的網址按下 enter,重新執行網頁後就會看到 network 有一個 hellonode 的檔案,看到 200 的狀態碼就代表有成功。
network
這邊可以看到 request
跟 response
的資訊:
hellonode